<template>
  <view class="editPage">
    <!-- 修改昵称 -->
    <view v-if="pageType === 'nickname'" class="modify-name">
      <view class="input-box">
        <input v-model="nickname" type="text" class="input">
        <view class="cancel">
          <u-icon name="close" size="20" top="10" />
        </view>
      </view>
      <view class="des">4-20个字符，可由中英文、数字、“_”、“-”组成</view>
      <view class="btn" @tap="submitNickName">确认修改</view>
    </view>

    <!-- 修改密码 -->
    <view v-if="pageType === 'password'" class="modify-password">
      <view class="item">
        <input v-model="newPassword" type="password" class="input" placeholder="输入新密码">
      </view>
      <view v-if="pswErrorTips === 2" class="error"><text class="error-icon">!</text>密码由字母加数字或符号至少两种以上字符组成6-20位半角字符，区分大小写</view>
      <view class="item">
        <input v-model="confirmPsw" type="password" class="input" placeholder="确认新密码">
      </view>
      <view v-if="pswErrorTips === 3" class="error"><text class="error-icon">!</text>请再次输入新密码！</view>
      <view v-if="pswErrorTips === 4" class="error"><text class="error-icon">!</text>新密码与确认密码不一致！请重新输入</view>
      <view class="btn" @tap="changePassword">确认修改</view>

      <!-- 修改密码成功 -->
      <view class="popup-min" :class="{ 'show': isShowSuccessPopup }">
        <view class="popup-mask" />
        <view class="popup-con-middle success">
          <view class="img" />
          <view class="text">密码修改成功</view>
          <view class="des">正在跳转登录页{{ loCount }}s...</view>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
import { updateProfile, updatePassword } from '@/api/api1.js'
export default {
  data() {
    return {
      pageType: 'nickname',
      nickname: '',
      // 修改密码
      newPassword: '',
      confirmPsw: '',
      pswErrorTips: 0, // 0无 1旧密码为空 2新密码格式不正确 3确认密码为空 4两次密码不一致
      isShowSuccessPopup: false, // 修改成功弹窗
      // 完成跳转首页倒计时
      loTimer: null,
      loCount: 0
    }
  },

  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  },

  onLoad(options) {
    this.pageType = options.type
    if (options.type === 'nickname') {
      this.nickname = options.nickname
      uni.setNavigationBarTitle({
        title: '修改用户昵称'
      })
    } else if (options.type === 'password') {
      uni.setNavigationBarTitle({
        title: '修改密码'
      })
    }
  },

  methods: {
    changePassword() {
      // var reg = new RegExp('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,20}$')
      // const passwordResult = reg.test(this.newPassword)
      // if (!this.newPassword || !passwordResult) {
      //   this.pswErrorTips = 2
      //   return
      // }
      if (!this.confirmPsw) {
        this.pswErrorTips = 3
        return
      }
      if (this.newPassword !== this.confirmPsw) {
        this.pswErrorTips = 4
        return
      }
      this.pswErrorTips = -1
      updatePassword(
        { username: this.userInfo.username, password: this.newPassword }
      ).then(() => {
        this.isShowSuccessPopup = true
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/users/login/index'
          })
        }, 3000)
        const loTimeCount = 3
        if (!this.loTimer) {
          this.loCount = loTimeCount
          this.loTimer = setInterval(() => {
            if (this.loCount > 0 && this.loCount <= loTimeCount) {
              this.loCount--
            } else {
              clearInterval(this.loTimer)
              this.loTimer = null
            }
          }, 1000)
        }
      })
    },
    // 修改头像信息
    submitNickName() {
      const that = this
      updateProfile(
        { username: that.userInfo.username, nickname: that.nickname }
      ).then(() => {
        that.userInfo.nickname = that.nickname
        setTimeout(() => {
          uni.$u.route('/pages/users/userSettings/userSettings')
        }, 1500)
      })
    }
  }
}
</script>

<style>
@import './editPage.css';
@import '@/popup.css';
</style>
